<template>
  <div id="mapcontain">
    <img class="titleimg" src="../assets/img/mid/img02.png" alt="" />
    <div class="botmap">
      <div class="contain">
        <img class="botimg" src="../assets/img/mid/img07.png" alt="" />
        <div class="col3 mt24">
          <div class="item fs">
            <img style="width:.48rem" src="../assets/img/mid/img03.png" alt="" />
            <div class="des">
              <div class="num">
                8,575,619
                <span>元</span>
              </div>
              <div class="text">救助总金额</div>
            </div>
          </div>
          <div class="item fs">
            <img style="width:.48rem" src="../assets/img/mid/img04.png" alt="" />
            <div class="des">
              <div class="num">
                1,213,450
                <span>元</span>
              </div>
              <div class="text">低保救助金额</div>
            </div>
          </div>
          <div class="item fs">
            <img style="width:.48rem" src="../assets/img/mid/img05.png" alt="" />
            <div class="des">
              <div class="num">
                2,234,560
                <span>元</span>
              </div>
              <div class="text">残联救助金额</div>
            </div>
          </div>
        </div>
        <img class="img6" src="../assets/img/mid/img06.png" alt="" />
        <div class="map">
          <div id="MAps" style="width:100%;height:100%"></div>
        </div>
        <!-- <div class="color fc">
          <img src="@/assets/img/mid/img10.png" alt="" />
          <div class="fbd box">
            <span>正常</span>
            <span>异常</span>
            <span>超异常</span>
            <span>街道</span>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { post, get } from "@/utils/axios";
import { supplyData } from "@/assets/json/supplyData";
import { streetarea } from "@/assets/json/streetarea";
import mapIconOff from "../assets/img/mid/img08.png";
import five from "@/assets/img/five.png";

export default {
  name: "mapcontain",
  components: {},
  data() {
    return {
      timer: null,
      MAps: null,
      cluster: null, //点聚合
      markers: [], //点聚合marks
      polygons: []
    };
  },
  created() {},
  mounted() {
    this.initMaps();
    this.supplyEvent();
    for (const key in streetarea) {
      this.mapline(streetarea[key], key);
    }
  },
  destroyed() {
    // this.timer = null;
  },
  methods: {
    initMaps() {
      // 配置地图的基本显示
      this.MAps = new AMap.Map("MAps", {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 17, //初始化地图层级
        center: [120.098969, 30.325291], //初始化地图中心点
        mapStyle: "amap://styles/darkblue"
      });

      let map = this.MAps;

      //鼠标点击marker弹出自定义的信息窗体
      AMap.event.addListener(this.MAps, "click", function() {
        map.clearInfoWindow();
      });
    },
    supplyEvent() {
      let map = this.MAps;
      map.clearMap();
      let markerFive = new AMap.Marker({
        map: map,
        position: [120.141503, 30.319126],
        // icon: mapIconOff, //图标注意顺序,在经纬度后边
        icon: new AMap.Icon({
          size: new AMap.Size(30, 30),
          image: five,
          imageSize: new AMap.Size(30, 30)
        })
      });
      markerFive.setLabel({
        offset: new AMap.Pixel(0, 20), //设置文本标注偏移量
        content:
          '<span style="font-weight:700;color:#FFDE00;">拱墅区政府</span>', //设置文本标注内容
        direction: "center" //设置文本标注方位
      });

      let data = supplyData;
      console.log(data, 9999);
      //点聚合
      data.forEach((item, index) => {
        let marker = new AMap.Marker({
          map: map,
          position: [item.lat, item.lng],
          // icon: mapIconOff, //图标注意顺序,在经纬度后边
          icon: new AMap.Icon({
            size: new AMap.Size(20, 30),
            image: mapIconOff,
            imageSize: new AMap.Size(20, 30)
          }),
          offset: new AMap.Pixel(-15, -15)
        });
        // marker.setTitle(item.name);
        // 设置label标签
        // label默认蓝框白底左上角显示，样式className为：amap-marker-label
        marker.setLabel({
          offset: new AMap.Pixel(-0, 8), //设置文本标注偏移量
          content: item.name, //设置文本标注内容
          direction: "top" //设置文本标注方位
        });
        // this.markers.push(marker);
        //鼠标点击marker弹出自定义的信息窗体
        AMap.event.addListener(marker, "mouseover", e => {
          let content =
            '<div class="building_map_div" style="text-align: left">' +
            '<div class="building_map_header_title">' +
            item.name +
            "</div>" +
            '<div><span class="building_map_title">低保低边:</span><span class="building_map_value">' +
            item.Minimum +
            "元</span></div>" +
            '<div><span class="building_map_title">高龄老人:</span><span class="building_map_value">' +
            item.Senior +
            "元</span></div>" +
            '<div><span class="building_map_title">残疾人:</span><span class="building_map_value">' +
            item.Disabled +
            "元</span></div>" +
            '<div><span class="building_map_title">其他:</span><span class="building_map_value">' +
            item.Other +
            "元</span></div>" +
            "</div>";
          let infoWindow = new AMap.InfoWindow({
            isCustom: true, //使用自定义窗体
            content: content,
            offset: new AMap.Pixel(0, -25)
          });
          infoWindow.open(map, marker.getPosition());

          // marker.setIcon(mapIconOff);

          // e.target.setIcon(siteOff); //图标注意顺序,在经纬度后边,放最后
        });
        AMap.event.addListener(marker, "click", e => {
          this.$router.push({
            path: "/capitaldetail",
            query: { name: item.name }
          });
        });
      });

      // addCluster(this.cluster, map, this.markers);
      //无参数时，自动自适应所有覆盖物
      map.setFitView();
    },
    mapline(lineArr, name) {
      //清除地图上所有覆盖物
      // if (this.polygons.length > 0) {
      //   console.log(this.polygons);
      //   for (var i = 0, l = this.polygons.length; i < l; i++) {
      //     this.polygons[i].setMap(null);
      //   }
      // }
      //  map.setCenter(obj[obj.options.selectedIndex].center)
      this.MAps.setZoomAndCenter(12, ["120.145534", "30.355397"]);
      var polygon = new AMap.Polygon({
        path: lineArr, //设置多边形边界路径
        strokeColor: name == "运河" ? "" : "#1e86fd", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 1, //线宽
        fillColor: name == "运河" ? "#41f4f8" : "#1791fc", //填充色
        fillOpacity: name == "运河" ? "0.8" : "0.2" //填充透明度
      });

      // polygon.setMap(null);
      polygon.setMap(this.MAps);
      this.polygons.push(polygon);
      // console.log(polygon, 9999);

      var overlayGroup = new AMap.OverlayGroup(this.polygons);

      // this.MAps.setFitView();
    }
  }
};
// 将当前经纬度展示在 infowindow 的 input 中

/**
 * 返回当前年月日的前一天
 * @returns {string}
 */
function getDate(params) {
  var date = new Date();
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate() + params;
  if (month < 10) {
    month = "0" + month;
  }
  if (day < 10) {
    day = "0" + day;
  }
  let nowDate = year + month + day;
  return nowDate;
}
</script>

<style lang="scss">
#mapcontain {
  text-align: center;
  width: 100%;
  .titleimg {
    width: 100%;
    margin: 0rem auto 0.6rem;
  }
  .botmap {
    height: 5.9rem;
  }
  .contain {
    width: 8rem;
    height: 4.5rem;
    position: relative;
    .img6 {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
    }
    .color {
      background-color: rgba(0, 0, 0, 0.1);
      position: absolute;
      right: 0.34rem;
      bottom: 0.6rem;
      z-index: 101;
      img {
        width: 0.32rem;
        height: 1.3rem;
      }
      .box {
        margin-left: 0.1rem;
        align-items: flex-start;
        line-height: 0.33rem;
      }
    }
  }
  .col3 {
    width: 6rem;
    position: absolute;
    left: 50%;
    top: -0.6rem;
    transform: translate(-50%, 0%);
    z-index: 1000;

    img {
      width: 0.46rem;
      margin-right: 0.06rem;
    }
  }
  .botimg {
    width: 1.3rem;
    position: absolute;
    left: 50%;
    bottom: -1rem;
    transform: translate(-50%, 0%);
    z-index: 1000;
  }
  .map {
    margin: 0 auto;
    padding-top: 0.3rem;
    box-sizing: border-box;
    width: 7.4rem;
    height: 4rem;
  }
  #infowindow {
    width: 3.6rem;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 101;
  }

  .amap-icon img {
    width: 0.3rem;
  }
  .operate_div {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8vw;
    height: 35vh;
    font-weight: 600;
    z-index: 100;
  }

  .amap-marker-label {
    cursor: pointer;
    color: #fff;
    font-size: 0.12rem;
    background: none;
    border: none;
  }

  .building_map_div {
    border-radius: 0.2vw;
    padding: 0.5vw;
    // background: rgba(0, 81, 255, 0.7);
    // box-shadow: 0px 10px 30px -9px #00027a;
    // border: solid 2px #0480f8;
    // border-image-slice: 1;
    background: url(../assets/img/mid/img09.png) center no-repeat;
    background-size: 100% 100%;
    font-size: 0.14rem;
    font-weight: bold;
    line-height: 3vh;
    word-break: keep-all;
  }

  .building_map_header_title {
    color: #3afc06;
    padding-left: 0.3vw;
    margin-left: -0.3vw;
    // background: linear-gradient(
    //   to right,
    //   rgba(1, 78, 255, 1),
    //   rgba(0, 0, 0, 0.1)
    // ); /* 标准的语法 */
  }

  .building_map_title {
    // color: #55a9ff;
  }

  .building_map_value {
    color: #fff;
    margin-left: 1vw;
  }
  .amap-logo {
    display: none !important;
  }
}
</style>
